<template>
  <div class="home-page-view">
    <div class="home-page">
      <div class="home-title-view">
        <div class="home-time">
          <span class="time-text">{{ dateTime }}</span>
          <span class="week-text">{{ dateToWeek(dateText) }}</span>
          <span class="date-text">{{ dateText }}</span>
        </div>

        <div class="btn-right" @click="btnExit">
          <img src="@/assets/dataStation/eixt.png">
          控制台
        </div>
        <!-- <a class="btn-right" href="javascript:window.opener=null;window.close()">
          <img src="@/assets/dataStation/eixt.png">
          控制台
        </a> -->

        <div class="gif-title-bg">
          <div class="farmName-view">{{ farmName }}生产看板</div>
        </div>
      </div>
      <div class="grid-view">
        <div class="item-left">
          <div class="title-box">
            <div class="txt">种植方案: {{ planData.number }}</div>
          </div>
          <div class="item-box">
            <div class="item-min-box" style="width:50%">
              <img src="@/assets/dataStation/t-min-1.png">
              <div class="box-txt">
                <div>作物:<span>{{ planData.cropName }},{{ planData.cropSeriesName }}</span></div>
                <div style="padding-top:5px;">播种时间:<span>{{ formatDateXie(planData.bozhongDate) }}</span></div>
              </div>
            </div>
            <div class="item-min-box" style="width:45%">
              <img src="@/assets/dataStation/t-min-1.png">
              <div class="box-txt">
                <div>亩产目标:<span>{{ planData.targetYield }}kg</span></div>
                <div style="padding-top:5px;">耕种方式:<span>{{  planData.tillageWayMeaning }}</span></div>
                <div style="padding-top:5px;">种植面积:<span>{{ planData.totalLandArea }}亩</span></div>
              </div>
            </div>
          </div>
          <div class="switch-box">

            <el-popover popper-class="switch-box-popover" placement="bottom" :width="200" trigger="hover">
              <template #reference>
                <img class="switch-img" src="@/assets/dataStation/switch.png" >
              </template>
              <ul class="farmpList">
                <li v-for="item in planList" :key="item.plantingPlanId"
                  :class="{ 'cur': item.plantingPlanId == planData.plantingPlanId }" @click="changeFarm(item)">{{
                    item.number
                  }}</li>
              </ul>
            </el-popover>
          </div>
          <div class="right-bottom-box">{{ planData.statusMeaning }}</div>
        </div>
        <div class="item-right">
          <div class="scgk-view">
            <div class="title2" />
            <div style="width:100%;height:80px;position:relative;margin-top: -10px;">
              <produce :produce-data="produceData" />
            </div>
            <img class="line-view" src="@/assets/dataStation/t-s-line.png">
          </div>
          <div class="status-view">
            <div class="item-text"><i /> 待处理<span>{{ produceData?.dclNum || 0 }}</span>项</div>
            <div class="item-text"><i style="background-color:#0480FF" />已处理<span>{{ produceData?.yclNum || 0 }}</span>项
            </div>
            <div class="item-text"><i style="background-color:#00E8A5" />已完成<span>{{ produceData?.ywcNum || 0 }}</span>项
            </div>
            <div class="item-text"><i style="background-color:#E02B42" />已延期<span>{{ produceData?.yyqNum || 0 }}</span>项
            </div>
            <div class="item-text"><i style="background-color:#C7C7C7" />已取消<span>{{ produceData?.yqxNum || 0 }}</span>项
            </div>
          </div>
          <div class="seasons-view">

            <div v-for="(item, index) in produceData?.stageRspList" :key="index" class="seasons-item">
              <div class="seasons-title"><span>{{ item.stageName }}</span>{{ formatDateXie(item.stageStartTime) }}-{{
                formatDateXie(item.stageEndTime) }}</div>
              <div class="seasons-content">
                <template v-for="(list, i) in item.taskRspList">
                  <div v-if="i < 6" :key="i" class="seasons-content-item1" :class="{
                    'seasons-content-item1': list.taskStatus == 'YWC',
                    'seasons-content-item2': list.taskStatus == 'DCL',
                    'seasons-content-item3': list.taskStatus == 'YYQ',
                    'seasons-content-item4': list.taskStatus == 'YCL',
                    'seasons-content-item5': list.taskStatus == 'YQX'
                  }">
                    <div :title="list.taskName" style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden; ">{{
                      list.taskName }}</div>
                    <div :title="list.fzRealName" style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden; ">{{
                      list.fzRealName }}</div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-view">
        <div class="max-land-center">
          <div class="min-land-center" />
        </div>
        <div class="max-land-center-right">
          <div class="min-land-center-right" />
        </div>
        <div v-if="compData.warning" class="real-time-view">
          <div class="context-view">
            <img class="left-icon" src="@/assets/dataStation/yj-cion.png">
            <div class="tip-view">{{ JSON.parse(compData.warning)[0].typeName }}</div>
            <div class="tip-content">
              <span v-for="dt in JSON.parse(compData.warning)" :key="dt.id" :title="dt.text">
                {{ dt.title }}
              </span>
            </div>
            <img style="height:12px;margin-right:4px;" src="@/assets/dataStation/yj-time.png">
            <span style="padding-right:20px;">{{ compData.createTime }}</span>
            <div class="right-view-box" @click="btnYjClick">查看 <img src="@/assets/dataStation/r1.png"></div>
          </div>
        </div>
        <div class="content-map">
          <iframe v-if="gisUrl" id="iframeContainer" :src="gisUrl" frameborder="0" scrolling="no" height="100%"
            width="100%" />
          <div class="content-map-legend">
            <div class="content-map-legend-text">过旺</div>
            <div class="content-map-legend-block" style="background-color: #d19925;" />
            <div class="content-map-legend-block" style="background-color: #08AD70;" />
            <div class="content-map-legend-block" style="background-color: #79C29B;" />
            <div class="content-map-legend-block" style="background-color: #F76464;" />
            <div class="content-map-legend-text">差</div>
          </div>
          <div v-if="groupList.length > 0" class="content-map-groups">
            <div class="content-map-groups-arrow-left" @click="moveLeft" />
            <div class="content-map-groups-items">
              <div v-for="(item, index) in groupList" :key="index" class="content-map-groups-item"
                :class="{ 'active': activeGroup == item.name }" @click="groupChanged(item.name)">
                <div :title="item.name"> {{ item.name }}</div>
              </div>
            </div>
            <div class="content-map-groups-arrow-right" @click="moveRight" />
          </div>
          <div class="content-map-status">
            <div class="content-map-status-item" @click="mapStatus = 'people'">
              <img :src="mapStatus == 'people' ? peopleSImgFile : peopleNImgFile">
            </div>
            <div class="content-map-status-item" @click="mapStatus = 'nav'">
              <img :src="mapStatus == 'nav' ? navSImgFile : navNImgFile">
            </div>
          </div>
        </div>
        <div class="content-left">
          <div class="max-title-view" :style="{ width: '70%' }">
            <div class="name">耕地使用情况</div>
            <div class="land-view">
              <div class="land-item">未使用</div>
              <div class="land-item on">已使用</div>
            </div>
          </div>
          <div class="usedLand-view">
            <div style="width:38%;height:100px;position:relative;">
              <usedLand @change="changeUseLand" />
            </div>
            <div style="width:12%;line-height:100px;text-align:center;"> <img class="line-img-view"
                src="@/assets/dataStation/t-s-line.png"></div>
            <div class="use-view">
              <div class="use-item">
                已使用(亩)<span>{{ ysyAreaSize || '0' }}</span>
              </div>
              <div class="nouse-item">
                未使用(亩) <span>{{ wsyAreaSize || '0' }}</span>
              </div>
            </div>
          </div>
          <div class="max-title-view" :style="{ width: '70%' }">
            <div class="name">预算与支出<span>单位：万</span></div>
          </div>
          <div class="mubiao-view">
            <div class="mb-left">
              <img src="@/assets/dataStation/002.gif">
              <div>
                <div class="mb-title">支出 (万)</div>
                <div v-if="budgetData?.totalPayAmount?.amount && budgetData?.totalPayAmount?.amount > 0" class="mb-num">
                {{Math.floor(Number((budgetData?.totalPayAmount?.amount / 10000)) * 100) / 100 }}
                </div>
                <div v-else class="mb-num">0</div>
              </div>
            </div>
            <div class="mb-right">
              <img src="@/assets/dataStation/001.gif">
              <div>
                <div class="mb-title">预算 (万)</div>
                <div v-if="budgetData?.totalBudgetFee?.amount && budgetData?.totalBudgetFee?.amount > 0" class="mb-num"> 
                   {{Math.floor(Number((budgetData?.totalBudgetFee?.amount / 10000)) * 100) / 100 }}
                  </div>
                <div v-else class="mb-num">0</div>
              </div>
            </div>
          </div>
          <div class="max-title-view" :style="{ width: '64%' }">
            <div class="name">用肥情况<span>单位：kg</span></div>
            <div class="land-view">
              <div class="land-item yon">用肥</div>
              <div class="land-item on">使用面积</div>
            </div>
          </div>
          <div style="position:relative;height:140px;width:65%">
            <dosage :title-list="fertilizerList1" :yf-list="fertilizerList2" :use-list="fertilizerList3" />
          </div>
          <div class="yl-box-view">
            <div v-for="(item, index) in fertilizerList" :key="index" class="yl-view">
              <div class="yl-num">{{ item.avgFeiliaoNum || 0 }}kg</div>
              <div class="yl-name">亩用量</div>
            </div>
            <!-- <div class="yl-view">
            <div class="yl-num">15kg</div>
            <div class="yl-name">亩用量</div>
          </div>
          <div class="yl-view">
            <div class="yl-num">15kg</div>
            <div class="yl-name">亩用量</div>
          </div> -->
          </div>
          <div class="max-title-view" :style="{ width: '62%' }">
            <div class="name">用药情况<span>单位：ml</span></div>
            <div class="land-view">
              <div class="land-item yon">用药</div>
              <div class="land-item on">使用面积</div>
            </div>
          </div>
          <div style="position:relative;height:140px;width:68%">
            <dosage :title-list="medicineList1" :yf-list="medicineList2" :use-list="medicineList3" />
          </div>
          <div class="yl-box-view">
            <div v-for="(item, index) in medicineList" :key="index" class="yl-view">
              <div class="yl-num">{{ item.avgYwNum || 0 }}ml</div>
              <div class="yl-name">亩用量</div>
            </div>
            <!-- <div class="yl-view">
            <div class="yl-num">15kg</div>
            <div class="yl-name">亩用量</div>
          </div>
          <div class="yl-view">
            <div class="yl-num">15kg</div>
            <div class="yl-name">亩用量</div>
          </div> -->
          </div>
        </div>
        <div class="content-right">
          <weather />
          <div class="right-box">
            <div class="max-title-view" style="width:66%">
              <div class="name">作物长势</div>
              <div class="right-title-view" @click="goUrl(1)">
                更多 <img src="@/assets/dataStation/r1.png">
              </div>
            </div>
          </div>
          <div class="right-box" style="margin-bottom: 18px;">
            <div class="grid-crop-view" style="width:66%">
              <template v-for="(item, index) in growthList" >
               <div :key="index" class="crop-item" v-if="index <= 2">
                  <div class="left-item">
                    <div class="icon-image">
                      <img v-if="item.avatarUrl" :src="item.avatarUrl">
                      <img v-else src="@/assets/dataStation/file-user.png">
                    </div>
                    <div>
                      <div class="name">{{ item.createName || '-漳卅-' }}</div>
                      <div class="task">{{ item.taskName }}
                        <span  style="
                        padding:3px 10px;
                        background: rgba(247,100,100,0.2);
                        color:#F76464;
                        font-size:12px;
                        border-radius: 20px;
                        margin-bottom:5px;
                        " :style="{
                          color: item.growthColor,
                          backgroundColor: item.growthColor + '45',
                          border: '1px solid ' + item.growthColor + '45'
                        }">
                        {{item.growthName }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="right-item">
                    <div class="time">{{ item.createTime }}</div>
                    <div class="handle">累计处理<span>{{ item.currentHandleCount }}</span>次</div>
                  </div>
              </div>
            </template>
              <el-empty v-if="growthList.length === 0" class="empty-view" :image="emptImg" :image-size="100" />
            </div>
          </div>
          <div class="right-box">
            <div class="max-title-view" style="width:70%;margin-top:1px;">
              <div class="name">农事动态</div>
              <div class="right-title-view" @click="goUrl(2)">
                更多 <img src="@/assets/dataStation/r1.png">
              </div>
            </div>
          </div>
          <div class="right-box" style="flex-wrap: wrap;">
            <template v-for="(item, index) in farmingList">
              <div v-if="index <= 2" :key="index" class="grid-crop-view"
                :style="{ width: index === 0 ? '70%' : (index === 1 ? '74%' : '78%') }">
                <div class="crop-item">
                  <div class="left-item">
                    <div class="icon-image">
                      <img v-if="item.avatarUrl" :src="item.avatarUrl">
                      <img v-else src="@/assets/dataStation/file-user.png">
                    </div>
                    <div>
                      <div class="name">{{ item.createName || '--' }}</div>
                      <div class="task">{{ item.taskName }}</div>
                    </div>
                  </div>
                  <div class="right-item">
                    <div class="time">{{ item.createTime }}</div>
                    <div class="handle">累计处理<span>{{ item.currentHandleCount }}</span>次</div>
                  </div>
                </div>
              </div>
            </template>
            <el-empty 
               v-if="farmingList.length === 0" class="empty-view" 
               style="width: 70%;" 
              :image="emptImg"
              :image-size="100" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import produce from './components/produce.vue'
import usedLand from './components/usedLand.vue'
import dosage from './components/dosage.vue'
import weather from './components/weather.vue'
import { getBudget, getFertilizer, getMedicine, getProduce, getGrowthList, getFarmingList, getPlanList, getFarmComp } from '@/api/board'
import { dateToWeek, formatDateXie, formatDate } from '@/utils/format'
import { useUserStore } from '@/pinia/modules/user'
import emptImg from '@/assets/dataStation/kong.png'

import moment from 'moment'
const userStore = useUserStore()

const router = useRouter()
const dateText = ref('--')
const dateTime = ref('--')
const wsyAreaSize = ref('--')
const ysyAreaSize = ref('--')
const budgetData = ref({})
const produceData = ref({})
const growthList = ref([])
const farmingList = ref([])
const fertilizerList = ref([])
const fertilizerList1 = ref([])
const fertilizerList2 = ref([])
const fertilizerList3 = ref([])

const medicineList = ref([])
const medicineList1 = ref([])
const medicineList2 = ref([])
const medicineList3 = ref([])
const planList = ref([])
const planData = ref({})
const compData = ref({})
const farmName = ref('--')
const backUrl = ref('')
const shopPop = ref(false)

const btnExit = () => {
  // if (localStorage.getItem('backUrl')) {
  //   router.push(localStorage.getItem('backUrl'))
  // } else {
  //   router.go(-1)
  // }
  router.push(`/manage/plan/list`)

}
const changeUseLand = (val) => {
  wsyAreaSize.value = val?.wsyAreaSize || 0
  ysyAreaSize.value = val?.ysyAreaSize || 0
}
const currentDate = new Date()
dateText.value = formatDate(currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1) + '-' + currentDate.getDate())

const getFertilizerData = () => {
  getFertilizer({ plantingPlanId: planData.value.plantingPlanId, farmId: userStore.userInfo.farmId }).then(res => {
    if (res.data && res.data.length > 0) {
      fertilizerList.value = res.data || []
      fertilizerList1.value = res.data.map((item) => item.shengyuqiName)
      fertilizerList2.value = res.data.map((item) => item.feiliaoNum)
      fertilizerList3.value = res.data.map((item) => item.mapAreaSize)
    } else {
      fertilizerList.value = [0]
      fertilizerList1.value = [0]
      fertilizerList2.value = [0]
      fertilizerList3.value = [0]
    }
  })
  getMedicine({ plantingPlanId: planData.value.plantingPlanId, farmId: userStore.userInfo.farmId }).then(res => {
    if (res.data && res.data.length > 0) {
      medicineList.value = res.data || []
      medicineList1.value = res.data.map((item) => item.shengyuqiName)
      medicineList2.value = res.data.map((item) => item.ywNum)
      medicineList3.value = res.data.map((item) => item.mapAreaSize)
    } else {
      medicineList.value = [0]
      medicineList1.value = [0]
      medicineList2.value = [0]
      medicineList3.value = [0]
    }
  })
  getProduce({ plantingPlanId: planData.value.plantingPlanId, farmId: userStore.userInfo.farmId }).then((res) => {
    if(res.success){
      produceData.value = res.data
    }
  })
  // 作物长势
  getGrowthList({ plantingPlanId: planData.value.plantingPlanId, farmId: userStore.userInfo.farmId, limit: 3, page: 1 }).then((res) => {
    if(res.success){
     growthList.value = res.data || []
    }
  })
  // 农事动态
  getFarmingList({ plantingPlanId: planData.value.plantingPlanId, farmId: userStore.userInfo.farmId, limit: 3, page: 1 }).then((res) => {
    if(res.success){
      farmingList.value = res.data || []
    }
  })
  getBudget({ plantingPlanId: planData.value.plantingPlanId }).then(res => {
    if(res.success){
      budgetData.value = res.data
    }
  })
}
const changeFarm = (item) => {
  planData.value = item
  shopPop.value = false
  getFertilizerData()
}

const goUrl = async (type) => {
  if (type === 1) {
    router.push(`/manage/crop/index`)
  } else {
    router.push(`/manage/record/index`)
  }
}
const btnYjClick = () => {
  router.push(`/warning/list`)
}

// 预警
const farmCompData = () => {
  getFarmComp({
    'limit': 1,
    'page': 1,
    companyId: userStore.userInfo.companyId,
    farmId: userStore.userInfo.farmId
  }).then((res) => {
    if (res.data.length > 0) {
      compData.value = res.data[0]
    }
  })
}

onMounted(() => {
  router.beforeEach((to, from) => {
    // console.log('当前路由地址', to.path)
    // console.log('上一个路由地址', from.path)
    localStorage.setItem('backUrl', from.path)
    backUrl.value = from.path
  })
  const fList = userStore.userInfo.farmList.filter((item) => {
    return item.farmId === userStore.userInfo.farmId
  })
  if (fList.length > 0) {
    farmName.value = fList[0].farmName
  }
  setInterval(() => {
    const currentTime = new Date()
    dateTime.value = moment(currentTime).format('HH:mm:ss')
  }, 1000)
  // 计划详情
  getPlanList({ farmId: userStore.userInfo.farmId }).then((res) => {
    planList.value = res.data || []
    planData.value = res.data.length > 0 ? res.data[0] : {}
    if (res.data.length > 0) {
      getFertilizerData()
    }
  })
  initMap()
  farmCompData()
})

// #region 地图相关

const gisUrl = ref('')

let iframeDom
let mapReady: boolean = false
const initMap = () => {
  const baseUrl = import.meta.env.VITE_GIS_PAGE // document.location.origin + '/gisView' //
  const userId = userStore.userInfo.userId
  const companyId = userStore.userInfo.companyId
  const farmId = userStore.userInfo.farmId
  gisUrl.value = `${baseUrl}/landScreen/home?userId=${userId}&companyId=${companyId}&farmId=${farmId}`
  nextTick(() => {
    iframeDom = document.querySelector('#iframeContainer')
    window.addEventListener('message', getMes)
  })
}
const getMes = (event) => {
  const { data: { type, params } } = event
  if (type == 'mapReady') {
    mapReady = true
    setMapDatas(growthList.value, params)
     const tiktok = window.setInterval(() => {
        if (growthList.value.length > 0) {
          setMapDatas(growthList.value, params)
          window.clearInterval(tiktok)
        }
      }, 500)
    // if (growthList.value.length > 0) {
    //   setMapDatas(growthList.value, params)
    // } else {
    //   const tiktok = window.setInterval(() => {
    //     if (growthList.value.length > 0) {
    //       setMapDatas(growthList.value, params)
    //       window.clearInterval(tiktok)
    //     }
    //   }, 500)
    // }
  }
}
const sendMesToMap = ({ type, params }) => {
  if (iframeDom && iframeDom.contentWindow) {
    iframeDom.contentWindow.postMessage({
      type: type,
      params: params
    }, '*')
  } else {
    iframeDom = document.querySelector('#iframeContainer')
    iframeDom.contentWindow.postMessage({
      type: type,
      params: params
    }, '*')
  }
}
const groupList = ref<Array<any>>([])
const activeGroup = ref<string>('')

const setMapDatas = (params, mapParams) => {
  const mapList = JSON.parse(mapParams)
  const groups = mapList.map(item => {
    return {
      name: item.label,
      id: item.value,
      value: []
    }
  })

  const item = params.sort((m, n) => new Date(m.createTime) > new Date(n.createTime))[0]

  if (item) {
    const { landRecordRspList, xuntianRecordRspList, plantingPlanId,stageTaskXuntianColor, stageTaskXuntianMeaning, stageTaskXuntianCode } = item
    // const cropTarget = xuntianRecordRspList[0]
    landRecordRspList.forEach(l => {
      const { groupName } = l
      const data = {
        farmLandNo: l.farmLandNo,
        plantingPlanId: plantingPlanId,
        groupName: groupName,
        xuntianCode: stageTaskXuntianCode||'NONE',
        xuntianColor: stageTaskXuntianColor||'#00000000',
        xuntianName: stageTaskXuntianMeaning||'',
        // xuntianCode: cropTarget ? cropTarget.xuntianCode : 'NONE',
        // xuntianColor: cropTarget ? cropTarget.xuntianColor : '#00000000',
        // xuntianName: cropTarget ? cropTarget.xuntianName : ''
      }
      groups.find(g => g.name == groupName)?.value.push(data)
    })
    groupList.value = groups
    activeGroup.value = groups[0].name
  } else {
    groupList.value = groups
    activeGroup.value =groups.length?groups[0].name:''
  }
}
watch(() => activeGroup.value, (val) => {
  const target = groupList.value.find(item => item.name == val)
  highLightLand(target ? target.value : [])
})
const highLightLand = (params) => {
  const data = {
    list: params,
    groupName: activeGroup.value
  }
  console.log(data,'----------------')
  sendMesToMap({
    type: 'locationHome',
    params: JSON.stringify(data)
  })
}
function moveRight() {
  const dom = document.querySelector('.content-map-groups-items')
  if (dom) {
    dom.scrollLeft += 70
  }
}
function moveLeft() {
  const dom = document.querySelector('.content-map-groups-items')
  if (dom) {
    dom.scrollLeft -= 70
  }
}
function groupChanged(val) {
  activeGroup.value = val
  // const target = groupList.value.find(item => item.name == val)
  // highLightLand(target ? target.value : [])
}
onBeforeUnmount(() => {
  destory()
})
const destory = () => {
  window.removeEventListener('message', getMes)
}
const mapStatus = ref<string>('people')
import peopleSImgFile from '../../assets/map/people-s.png'
import peopleNImgFile from '../../assets/map/people-n.png'
import navSImgFile from '../../assets/map/nav-s.png'
import navNImgFile from '../../assets/map/nav-n.png'
// #endregion
</script>
<style>
.empty-view .el-empty__description p {
  color: #A4D9CD;
  font-size: 14px;
}
</style>
<style scoped lang="scss">
.home-page-view {
  margin: 0 auto;
  padding: 0;
}

.home-page {
  background-image: url('@/assets/dataStation/bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  min-width: 1920px;
  min-height: 1080px;
  margin: 0 auto;
  padding: 0;

  .date-picker-view {
    position: absolute;
    right: 15%;
  }

  .home-title-view {
    background-image: url('@/assets/dataStation/header2-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100px;
    width: 100%;
    position: relative;

    .home-time {
      padding: 15px 16px;

      .time-text {
        color: #CCEFE6;
        font-size: 25px;
        text-shadow: 0px 0px 10px rgba(0, 232, 165, 0.55);
      }

      .date-text,
      .week-text {
        color: #79E1D0;
        font-size: 14px;
      }

      .week-text {
        padding: 0 10px;
      }
    }

    .btn-right {
      background-image: url('@/assets/dataStation/btn-right-top.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      width: 80px;
      right: 25px;
      top: 18px;
      text-align: center;
      font-size: 13px;
      color: #2998E1;
      line-height: 32px;
      color: #CCEFE6;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      cursor: pointer;
      z-index: 999;

      img {
        height: 20px;

      }
    }

    .gif-title-bg {
      background-image: url('@/assets/dataStation/header2-bg.gif');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 100px;
      width: 100%;
      position: absolute;
      top: 0;
      z-index: 9;

      .farmName-view {
        margin: 0 auto;
        text-align: center;
        font-size: 40px;
        color: #fff;
        line-height: 85px;
        background: linear-gradient(360deg, #7ACBB9 0%, #FFFDFD 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
      }
    }
  }

  .grid-view {
    display: flex;
    justify-content: space-between;
    height: 110px;

    .item-left {
      position: relative;
      width: 29.8%;
      background-image: url('@/assets/dataStation/t-left-max-bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;

      .title-box {
        background-image: url('@/assets/dataStation/t-title-1.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: 80%;
        margin: 0 auto;

        .txt {
          height: 30px;
          line-height: 30px;
          text-align: center;
          margin: 0 auto;
          font-size: 16px;
          font-weight: 600;
          color: #FFFFFF;
          background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .item-box {
        justify-content: space-between;
        display: flex;
        padding: 0 10px;

        .item-min-box {
          width: 47%;
          height: 60px;
          padding: 5px;
          justify-content: left;
          display: flex;
          background-image: url('@/assets/dataStation/t-min-title-bg.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center;
          align-items: center;
          margin-top: 5px;

          img {
            height: 40px;
          }

          .box-txt {
            font-size: 12px;
            color: #A4D9CD;

            span {
              font-size: 14px;
              font-weight: 600;
              color: #FFFFFF;
              background: linear-gradient(360deg, #F19404 0%, #FFFDFD 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              padding-left: 4px;
            }
          }
        }
      }

      .switch-box {
        position: absolute;
        right: 5px;
        height: 30px;
        width: 30px;
        top: 4px;
        z-index: 999;
        cursor: pointer;

        .switch-img {
          height: 28px;
          width: 28px;
        }
      }

      .right-bottom-box {
        position: absolute;
        right: 0;
        line-height: 44px;
        height: 30px;
        width: 50px;
        bottom: 0;
        z-index: 999;
        text-align: center;
        font-size: 12px;
        color: #fff;
        text-indent: 10px;
        cursor: pointer;
        background-image: url('@/assets/dataStation/right-bottom.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
      }
    }

    .item-right {
      width: 70%;
      display: flex;
      justify-content: left;
      position: relative;
      background-image: url('@/assets/dataStation/t-right-max-bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;

      .scgk-view {
        width: 245px;
        height: 110px;
        position: relative;

        .title2 {
          background-image: url('@/assets/dataStation/t-title-2.png');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          width: 100%;
          margin: 0 auto;
          height: 40px;
        }

        .line-view {
          height: 100px;
          width: 10px;
          position: absolute;
          right: 10px;
          top: 50%;
          margin-top: -50px;
          z-index: 99;
        }
      }

      .status-view {
        display: flex;
        justify-content: flex-start;
        width: 100px;
        flex-wrap: wrap;
        align-items: center;
        padding: 5px 0 5px 5px;

        .item-text {
          font-size: 12px;
          color: #7ACBB9;
          position: relative;
          display: flex;
          align-items: center;
          width: 100px;
          justify-content: flex-start;

          i {
            display: block;
            height: 13px;
            width: 13px;
            background-color: #F5AA0F;
            margin-right: 3px;
            border-radius: 2px;
          }

          span {
            margin: 0 5px;
            font-size: 12px;
            color: #B7FFEE;
            font-weight: 600;
          }
        }
      }

      .seasons-view {
        display: flex;
        justify-content: space-between;
        width: calc(100% - 300px);

        .seasons-item {
          width: 25%;
          height: 100px;
          padding: 0 10px 5px 10px;

          .seasons-title {
            text-align: center;
            font-weight: 400;
            color: #B1FFEC;
            font-size: 12px;
            text-shadow: 0px 0px 13px #00E4A2;
            background-image: url('@/assets/dataStation/t-title-3.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: bottom;
            height: 25px;
            line-height: 25px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            span {
              font-size: 14px;
              margin-right: 4px;
            }
          }

          .seasons-content {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            margin: 3px auto 0 auto;

            .seasons-content-item1,
            .seasons-content-item2,
            .seasons-content-item3,
            .seasons-content-item4,
            .seasons-content-item5,
            .seasons-content-item {
              background-image: url('@/assets/dataStation/s-box-1.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              background-position: center;
              width: 31%;
              border-radius: 2px;
              text-align: center;
              padding: 5px 0;
              color: #B1FFEC;
              font-size: 12px;
              margin-right: 3px;
              margin-bottom: 3px;

              div {
                font-size: 12px;
              }
            }

            .seasons-content-item1 {
              background-image: url('@/assets/dataStation/s-box-1.png');
            }

            .seasons-content-item2 {
              background-image: url('@/assets/dataStation/s-box-2.png');
            }

            .seasons-content-item3 {
              background-image: url('@/assets/dataStation/s-box-3.png');
            }

            .seasons-content-item4 {
              background-image: url('@/assets/dataStation/s-box-4.png');
            }

            .seasons-content-item5 {
              background-image: url('@/assets/dataStation/s-box-5.png');
            }
          }

        }
      }
    }
  }

  .max-title-view {
    background-image: url('@/assets/dataStation/max-title-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left;
    height: 35px;
    line-height: 35px;
    color: #BBECE5;
    font-size: 14px;
    font-weight: bold;
    text-indent: 10px;
    display: flex;
    justify-content: space-between;
    margin-top: 19px;
    width: 70%;

    .name {
      span {
        margin-left: 10px;
        font-size: 12px;
      }
    }

    .land-view {
      font-size: 12px;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: start;

      .land-item {
        font-size: 12px;
        color: #01C6A9;
        position: relative;
        text-indent: 20px;
      }

      .on {
        margin-left: 20px;
      }

      .on::after,
      .yon::after,
      .land-item::after {
        content: '';
        height: 13px;
        width: 13px;
        background-color: #A7ABAB;
        margin-right: 3px;
        border-radius: 2px;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -7px;
      }

      .on::after {
        background-color: #01C6A9;
      }

      .yon::after {
        background-color: #F5AA0F;
      }
    }

    .right-title-view {
      width: 60%;
      font-size: 12px;
      font-weight: 400;
      color: #A4D9CD;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;

      img {
        height: 20px;
        vertical-align: middle;
      }
    }
  }

  .usedLand-view {
    display: flex;
    width: 70%;
    padding-top: 10px;

    .line-img-view {
      height: 80px;
      width: 10px;
      vertical-align: middle;
    }

    .use-view {
      font-size: 13px;
      padding: 20px 0;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .nouse-item,
      .use-item {
        width: 100%;
        color: #A4D9CD;
        position: relative;
        text-indent: 14px;

        span {
          color: #EFFFFB;
          font-size: 14px;
          margin-left: 5px;
        }
      }

      .nouse-item::after,
      .use-item::after {
        background-color: #02B583;
        content: '';
        height: 8px;
        width: 8px;
        border-radius: 8px;
        position: absolute;
        top: 50%;
        margin-top: -4px;
        left: 0;
      }

      .nouse-item::after {
        background-color: #A7ABAB;
      }

    }
  }

  .yl-box-view {
    display: flex;
    justify-content: center;
    width: 60%;
    margin-left: 20px;

    .yl-view {
      width: 31%;
      text-align: center;
      background-image: url('@/assets/dataStation/004.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      padding: 15px 0;
      margin-top: 6px;

      .yl-num {
        color: #B7FFEE;
        font-size: 14px;
        font-weight: 600;
        padding-bottom: 6px;
      }

      .yl-name {
        color: #B7FFEE;
        font-size: 12px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .yl-name::before,
      .yl-name::after {
        content: '';
        height: 4px;
        width: 4px;
        background-color: #B7FFEE;
        margin-left: 3px;
        border-radius: 4px;
        // position: absolute;
        // left: 20%;
        // top: 50%;
        //margin-top: -2px;
        box-shadow: 1px 0px 10px #00ebb4;
      }

      .yl-name::before {
        margin-right: 3px;
        // left: auto;
        // right: 20%;
      }
    }
  }

  .content-view {
    height: calc(100vh - 190px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 5px;
    min-height: 864px;

    .max-land-center {
      background-image: url('@/assets/dataStation/right-qq.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 0px 45px;
      width: 180px;
      height: calc(100vh - 180px);
      position: absolute;
      left: 50%;
      margin-left: -26.5%;
      top: 0;
      min-height: 864px;
      z-index: 99;

      .min-land-center {
        background-image: url('@/assets/dataStation/right-qq.gif');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: -30px 5px;
        width: 150px;
        height: calc(100vh - 180px);
        position: absolute;
        left: 50%;
        margin-left: -35%;
        top: 0;
        min-height: 864px;
        background-size: auto 80%;
        background-repeat: no-repeat;
        background-position: -15px 50%;
      }
    }

    .max-land-center-right {
      background-image: url('@/assets/dataStation/left-qq.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: right 35px;
      width: 180px;
      height: calc(100vh - 180px);
      position: absolute;
      right: 50%;
      margin-right: -26%;
      top: 0px;
      min-height: 864px;
      z-index: 99;

      .min-land-center-right {
        background-image: url('@/assets/dataStation/left-qq.gif');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right 0px;
        width: 110px;
        height: calc(100vh - 180px);
        position: absolute;
        right: 50%;
        margin-right: -50%;
        min-height: 864px;
        top: 0px;

        background-size: auto 80%;
        background-repeat: no-repeat;
        background-position: right 50%;
        width: 150px;
        height: calc(100vh - 180px);
        position: absolute;
        right: 50%;
        margin-right: -43%;
        min-height: 864px;
        top: 0px;
      }
    }

    .real-time-view {
      background-image: url('@/assets/dataStation/yj-bg12.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      width: 40%;
      height: 45px;
      left: 50%;
      margin-left: -20%;
      position: absolute;
      z-index: 99;
      top: 0;
      line-height: 45px;

      .context-view {
        padding: 0 20px;
        display: flex;
        justify-content: left;
        align-items: center;
        color: #FFD4A6;
        font-size: 12px;
        position: relative;

        .tip-content {
          color: #FFD4A6;
          font-size: 12px;
          padding: 0 5px;
          width: 40%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .left-icon {
          height: 40px;
        }

        .tip-view {
          height: 22px;
          background-color: #F7646420;
          border-radius: 2px;
          border: 1px solid #F7646445;
          font-weight: 500;
          color: #FFEBD5;
          font-size: 14px;
          line-height: 22px;
          text-align: center;
          padding: 0 5px;
        }
      }

      .right-view-box {
        position: absolute;
        right: 20px;
        z-index: 9;
        color: #A4D9CD;
        font-size: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;

        img {
          height: 14px;
          vertical-align: middle;
        }

      }
    }

    .content-right,
    .content-left {
      width: 30%;
      height: calc(100vh - 180px);
      min-height: 864px;
      background-image: url('@/assets/dataStation/left-bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: top;
      position: absolute;
      padding-left: 22px;
      top: 0;

      .mubiao-view {
        display: flex;
        justify-content: left;
        width: 70%;
        padding-top: 10px;

        .mb-right,
        .mb-left {
          display: flex;
          justify-content: center;
          color: #A4D9CD;
          background-image: url('@/assets/dataStation/mb-bg.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center;
          align-items: center;
          height: 92px;
          width: 46%;

          .mb-title {
            font-size: 14px;
          }

          .mb-num {
            font-size: 16px;
            padding-top: 4px;
          }

          img {
            height: 90%;
            margin-right: 10px;
          }
        }

        .mb-left {
          margin-right: 6px;
        }
      }
    }

    .content-left {
      left: 0;
    }

    .content-right {
      right: 0;
    }

    .content-right {
      background-image: url('@/assets/dataStation/right-bg.png');
      padding-right: 16px;

      .right-box {
        display: flex;
        justify-content: end;
      }

      .grid-crop-view {
        .crop-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 12px;

          .left-item {
            display: flex;
            justify-content: left;
            align-items: center;

            .icon-image {
              width: 42px;
              height: 42px;
              border-radius: 42px;
              border: 3px solid #01C6A980;
              margin-right: 9px;
              overflow: hidden;

              img {
                vertical-align: middle;
                height: 100%;
                width: 100%;
              }
            }

            .name {
              font-size: 14px;
              color: #BBECE5;
              padding-bottom: 10px;
            }

            .task {
              font-size: 12px;
              color: #A4D9CD;
              padding-top: 4px;
            }
          }

          .right-item {
            text-align: right;

            .time {
              color: #7ACBB9;
              font-size: 12px;
              padding-bottom: 10px;
            }

            .handle {
              color: #B7FFEE;
              font-size: 12px;
              padding-top: 4px;

              span {
                font-size: 14px;
                font-weight: 600;
                color: #FEB723;
                padding: 0 3px;
              }
            }
          }
        }
      }
    }

    .content-map {
      width: 100%;
      height: 100%;
      position: absolute;

      .content-map-legend {
        position: absolute;
        left: 30%;
        bottom: 70px;
        width: 40px;
        height: 130px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: url('@/assets/map/legend.png');
        z-index: 999;

        .content-map-legend-text {
          font-size: 12px;
          color: #7ACBB9;
          margin: 4px 0;
        }

        .content-map-legend-block {
          width: 10px;
          height: 20px;
        }
      }

      .content-map-groups {
        display: flex;
        align-items: center;
        position: absolute;
        left: 50%;
        bottom: 20px;
        max-width: 40%;
        height: 48px;
        transform: translateX(-50%);
        overflow: hidden;
        z-index: 999;

        .content-map-groups-arrow-left {
          width: 50px;
          background: url('@/assets/map/arrow_left.png');
          height: 100%;
          background-position: center;
          background-size: cover;
          cursor: pointer;
        }

        .content-map-groups-arrow-right {
          width: 50px;
          background: url('@/assets/map/arrow_right.png');
          height: 100%;
          background-position: center;
          background-size: cover;
          cursor: pointer;
        }

        .content-map-groups-items {
          height: 100%;
          font-size: 16px;
          color: #ffffff;
          display: flex;
          align-items: center;
          width: calc(100% - 100px);
          overflow-x: auto;

        }

        .content-map-groups-items::-webkit-scrollbar {
          height: 0px;
          /* 控制滚动条宽度 */
        }

        .content-map-groups-item:first-child {
          margin-left: 0;
        }

        .content-map-groups-item {
          background: url('@/assets/map/group_active.png');
          background-position: center;
          opacity: 0.7;
          width: 140px;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          flex: none;
          margin-left: -20px;
          >div {
            width: 100px;
            text-align: center;
            margin: 0 auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space:nowrap;
          }
          &:hover {
            cursor: pointer;
            opacity: 1;
          }
        }

        .active {
          opacity: 1;
        }
      }

      .content-map-status {
        position: absolute;
        right: 30%;
        bottom: 75px;
        align-items: center;
        justify-content: center;
        display: flex;
        z-index: 999;

        &-item {
          flex: 1;
          margin: 0 -10px;

          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
}

.farmpList {
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    padding: 0;
    color: #fefefe;

    &.cur {
      color: #04AE70;
    }

    &:hover {
      cursor: pointer;
      background-color: rgba(0, 175, 112, 0.06)
    }
  }
}
</style>
